const canvasBg = function() {
  const cs = document.querySelector('#cs-bg')
  const ctx = cs.getContext('2d')
  cs.width = window.innerWidth
  cs.height = window.innerHeight
  const balls = []
  const colors = [
    '#FFFFCC',
    '#CCFFFF',
    '#FFCCCC',
    '#99CCCC',
    '#FFCC99',
    '#FFCCCC',
    '#FF9999',
    '#996699',
    '#FFCCCC',
    '#CC9999',
    '#FFFFCC',
    '#CCCC99',
    '#FFCCCC',
    '#FFFF99',
    '#CCCCFF',
    '#0099CC',
    '#CCCCCC',
    '#FF6666',
    '#FF9966',
    '#FF6666',
    '#FFCCCC',
    '#CC9966',
    '#666666',
    '#CC9999',
    '#FF6666',
    '#FFFF66',
    '#99CC66',
    '#CC3333',
    '#CCCCCC',
    '#003366',
    '#993333',
    '#CCCC00',
    '#663366',
    '#CCCC99',
    '#666666',
    '#CC9999',
    '#FF6666',
    '#FFFF00',
    '#0066CC',
    '#CC0033',
    '#333333',
    '#CCCC00',
    '#336633',
    '#990033',
    '#FFCC99',
    '#993333',
    '#CC9966',
    '#003300',
    '#FF0033',
    '#333399',
    '#CCCC00',
    '#CC0033',
    '#000000',
    '#003399',
    '#000000',
    '#99CC00',
    '#CC0033',
    '#999933',
    '#993333'
  ]
  const maxDistance = 150

  // 生成小球
  for (let i = 0; i < 100; i++) {
    const r = rd(5, 10)
    const ball = {
      x: rd(0, cs.width - 2 * r),
      y: rd(0, cs.height - 2 * r),
      color: colors[parseInt(Math.random() * colors.length)],
      r: rd(1, 2),
      vx: (Math.random() > 0.5 ? 1 : -1) * rd(1, 3),
      vy: (Math.random() > 0.5 ? 1 : -1) * rd(1, 3),
      name: 'b' + i
    }
    balls.push(ball)
  }

  setInterval(() => {
    ctx.beginPath()
    // ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
    // ctx.fillRect(0, 0, cs.width, cs.height)
    ctx.clearRect(0, 0, cs.width, cs.height)
    drawBall()
    drawLine()
  }, 50)

  function drawBall() {
    ctx.beginPath()
    // ctx.clearRect(0, 0, cs.width, cs.height);
    // ctx.fillStyle = 'rgba(0, 0, 0, 0.01)'
    // ctx.fillRect(0, 0, cs.width, cs.height)

    balls.forEach(v => {
      if (v.x + 2 * v.r > cs.width || v.x < 0) {
        v.vx = -v.vx
      }

      if (v.y + 2 * v.r > cs.height || v.y < 0) {
        v.vy = -v.vy
      }

      v.x = v.x + v.vx
      v.y = v.y + v.vy
      draw(v)
    })
  }

  function draw(v) {
    ctx.beginPath()
    ctx.arc(v.x, v.y, v.r, 0, Math.PI * 2)
    ctx.fillStyle = v.color
    // ctx.globalCompositeOperation = 'lighter';
    ctx.fill()
  }

  function drawLine() {
    balls.forEach((v, i) => {
      if (i < balls.length - 1) {
        for (let j = i + 1; j < balls.length; j++) {
          // 判断每个球求的距离
          // console.log(`${v.name} 和 ${balls[j].name}的距离是:`, Math.sqrt( Math.pow(v.x - balls[j].x )  + Math.pow( v.y -balls[j].y ) ) );
          // console.log('x:', v.x - balls[j].x);
          // console.log('y:',v.y - balls[j].y);
          if (Math.abs(v.y - balls[j].y) > maxDistance || Math.abs(v.x - balls[j].x) > maxDistance) {
            continue
          }

          //   console.log('Math.pow(v.x - balls[j].x ):', Math.pow(v.x - balls[j].x, 2))
          //   console.log('Math.pow(v.y - balls[j].y ):', Math.pow(v.y - balls[j].y, 2))
          const _distance = Math.sqrt(Math.pow(v.x - balls[j].x, 2) + Math.pow(v.y - balls[j].y, 2))

          if (_distance < maxDistance) {
            // let _lineWidth = maxDistance / _distance
            //   if (_lineWidth > 5) {
            //     _lineWidth = 5
            //   }
            //   if (_lineWidth < 0.1) {
            //     _lineWidth = 0.1
            //   }

            const _lineWidth = 0.1
            drawradientLine(v.x, v.y, balls[j].x, balls[j].y, _lineWidth, [v.color, balls[j].color])
          }
        }
      }
    })
  }

  function rd(min = 10, max = 20) {
    return parseInt(min + Math.random() * (max - min))
  }

  // drawradientLine(10, 10, 10 + 500, 10, 50, ['red', 'yellow', 'green', 'orange', '#FF00FF']);
  /**
   * [drawradientLine 画颜色线性变化的线条]
   * @param  {[type]} x1        [起点x坐标]
   * @param  {[type]} y1        [起点y坐标]
   * @param  {[type]} x2        [终点x坐标]
   * @param  {[type]} y2        [终点y坐标]
   * @param  {[type]} lineWidth [线条宽度]
   * @param  {[type]} colors    [颜色数组，均匀分布的]
   * @return {[type]}           [无]
   */
  function drawradientLine(x1, y1, x2, y2, lineWidth, colors) {
    ctx.beginPath() // 开始路径，如果没有这个和结束路径包围，所有线条都是最后那根线条的样式了
    ctx.moveTo(x1, y1) // 开始位置
    ctx.lineTo(x2, y2) // 画到此处
    ctx.lineWidth = lineWidth

    var grd = ctx.createLinearGradient(x1, y1, x2, y2) // 线性渐变的起止坐标
    for (var i = 0; i < colors.length; i++) {
      grd.addColorStop(i / colors.length, colors[i])
    }
    ctx.strokeStyle = grd

    ctx.closePath() // 结束路径，应与开始路径呼应(会不会导致内存泄露跟实现有关系)
    ctx.stroke()
  }
  window.onresize = function() {
    cs.width = window.innerWidth
    cs.height = window.innerHeight
  }
}

export default canvasBg
